<template>
  <div style="margin: 60px 0 0 80px;">
    <!-- 搜索表单 -->
    <el-form 
      :model="ruleForm" 
      :rules="rules" 
      ref="ruleForm" 
      label-width="80px"
      class="search-form"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="字段：" prop="key">
            <el-select 
              v-model="ruleForm.key" 
              placeholder="请选择字段"
              style="width: 100%"
            >
              <el-option label="学生" value="studentName"></el-option>
              <el-option label="宿舍" value="dormitoryName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="值：" prop="value">
            <el-input 
              v-model="ruleForm.value" 
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button 
              type="primary" 
              icon="el-icon-search" 
              @click="submitForm('ruleForm')"
            >
              搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="230"></el-table-column>
      <el-table-column prop="studentName" label="学生" width="230"></el-table-column>
      <el-table-column prop="dormitoryName" label="宿舍" width="230"></el-table-column>
      <el-table-column prop="reason" label="迁出原因" width="230"></el-table-column>
      <el-table-column prop="createDate" label="迁出日期" width="230"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; text-align: right"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      :current-page.sync="currentPage"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
    import { getMoveoutList, searchMoveout } from '@/api/moveout'

export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 3,
      total: null,
      ruleForm: {
        key: '',
        value: '',
        page: 1,
        size: 3
      },
      rules: {
        key: [
          { required: true, message: '请选择字段', trigger: 'change' }
        ],
        value: [
          { required: true, message: '请输入关键字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return

        this.currentPage = 1
        this.ruleForm.page = this.currentPage
        this.ruleForm.size = this.pageSize

        searchMoveout(this.ruleForm)
          .then(resp => {
            this.tableData = resp.data.data.data
            this.total = resp.data.data.total
          })
          .catch(() => {
            this.$message.error('搜索失败')
          })
      })
    },
    pageChange(page) {
      this.currentPage = page

      if (!this.ruleForm.value) {
        getMoveoutList(page, this.pageSize)
          .then(resp => {
            this.tableData = resp.data.data.data
            this.total = resp.data.data.total
          })
          .catch(() => {
            this.$message.error('获取列表失败')
          })
      } else {
        this.ruleForm.page = page
        this.ruleForm.size = this.pageSize
        searchMoveout(this.ruleForm)
          .then(resp => {
            this.tableData = resp.data.data.data
            this.total = resp.data.data.total
          })
          .catch(() => {
            this.$message.error('搜索失败')
          })
      }
    }
  },
  created() {
    getMoveoutList(1, this.pageSize)
      .then(resp => {
        this.tableData = resp.data.data.data
        this.total = resp.data.data.total
      })
      .catch(() => {
        this.$message.error('初始化列表失败')
      })
  }
}

</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
</style>